<template>
	<view class="page">
    <view class="top">
      <view class="topTitle">环保回收旧衣服助力低碳生活</view>
      <img style="width: 100vw;height: 200px;" src="http://127.0.0.1:3000/app/002.jpg" alt="">
      <u-steps class="topStep" activeColor="#19be6b"  :current="step">
		    <u-steps-item title="填写信息" desc="第一步"></u-steps-item>
        <u-steps-item title="用户下单" desc="第二步" ></u-steps-item>
        <u-steps-item title="员工接单" desc="第三步"></u-steps-item>
        <u-steps-item title="员工上门" desc="第四步"></u-steps-item>
        <u-steps-item title="回收完成" desc="第五步"></u-steps-item>
	    </u-steps>
      <u-button @click="goNext" class="topButton" type="primary" icon="arrow-rightward" text="查看下一步"></u-button>
    </view>
    <u-line color="#2979ff"></u-line>
    <view class="main">
      <u--form ref="uForm" label-position="left" :model="form" :rules="rules">
        <u-form-item required label="昵称" prop="ordername" border-bottom>
					<u--input v-model="form.ordername" border="none" placeholder="请输入昵称"></u--input>
				</u-form-item>
        <u-form-item required label="账号" prop="phone" border-bottom>
					<u--input v-model="form.phone" border="none" placeholder="请输入账号"></u--input>
				</u-form-item>
        <u-form-item required label="地址" prop="address" border-bottom>
					<u--textarea v-model="form.address"  border="none" count placeholder="请输入家庭地址" ></u--textarea>
				</u-form-item>
        <u-form-item required label="日期" prop="dataSpan" border-bottom>
          <u-calendar :show="show" mode="single" @confirm="confirm"></u-calendar>
          <u-button @click="show = true">选择日期</u-button>
          <span style="width: 120px;">{{ dataSpan }}</span>
				</u-form-item>
        <u-form-item required label="时间" prop="timeSpan" border-bottom>
          <u-radio-group v-model="radiovalue1" placement="column" activeColor="#18b566">
            <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index" 
            :label="item.name" :name="item.name" @change="radioChange">
            </u-radio>
          </u-radio-group>
        </u-form-item>
      </u--form>
    </view>
    <view class="foot">
      <view class="footButton" @click="toRecycleOrder">下单</view>
    </view>
	</view>
</template>

<script>
  import { baseUrl } from '@/config'
export default {
	data() {
		return {
      userId:'',
         id:0,
        doller:0,
        status:0,
        weight:'',
        dataSpan:'',
        timeSpan:'',
        show: false,
        step:0,
        form:{
          phone:'',
          ordername:'',
          address:'',
        },
        rules:{
          phone: [
            {
              required: true, 
              message: '请输入手机号',
              trigger: ['change','blur'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change','blur'],
            }
          	],
          ordername: [
					{
						required: true,
						message: '请输入昵称',
            trigger: ['blur', 'change']
					}
				],
          address:[
            {
						required: true,
						message: '请输入地址',
            trigger: ['blur', 'change']
					}
            ]
        },
        radiolist1: [
          {name: '8:00-10:00',disabled: false},
          {name: '11:00-12:00',disabled: false},
          {name: '14:00-16:00',disabled: false}, 
          {name: '16:00-18:00',disabled: false}
        ],radiovalue1: '11:00-12:00'
		};
	},
  onShow(){

  },
  onReady() {
		this.$refs.uForm.setRules(this.rules)
    
	},
	methods: {

    toRecycleOrder(){
      this.$refs.uForm.validate().then(res => {
        this.userId=uni.getStorageSync('user').data[0].userId
        if (res) {
					uni.request({
            url:baseUrl+"/v1/recycle/orderAdd",
            method: 'POST',
            header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
 					data: {
            userId:this.userId,
 						phone: this.form.phone,
 						address: this.form.address,
            ordername:this.form.ordername,
            status:this.status,
            dataSpan:this.dataSpan,
            timeSpan:this.timeSpan
 					},
          success:(res)=>{
            if (res.data.code == 200) {
              
                    
                    uni.showToast({
                    title: '下单成功',
                    duration: 1000
                  });
                  setTimeout(function() {
                    uni.reLaunch({
                            url: '/pages/recycle-order/index'
                          });
                  }, 1500)
                             
 				} else {
 					uni.showToast({
 						title: "注册失败!",
 						icon: 'none',
 						duration: 2000
 					})
 				}
          }
 				})
				}
      })
    },
    radioChange(n) {
        this.timeSpan = n;
      },
    confirm(e) {
        this.show = false;
        this.dataSpan=e[0]
			},
    goNext(){
      if(this.step<=4){this.step+=1}
      else{this.step=0}
    }
	}
};
</script>

<style lang="scss" scoped>
.page{
  // background-image: url(http://127.0.0.1:3000/app/bg.jpg);
  .top{
    .topTitle{
      border-radius: 40px;
      background-color: #18b566;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      }
    .topStep{
      margin-top: 40rpx;
      }
    .topButton{
      background-color: #19be6b;
      width: 200rpx;
      border-radius: 40rpx;
      margin-top: 20rpx;
      }
  }
  .main{
    margin: 20rpx 60rpx;
  }
  .foot{
    .footButton {
      width: 300rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 50rpx;
      color: #ffffff;
      background:   #19be6b;
      margin: 30rpx auto 0;
      text-align: center;
    
	  }
  }
  
}
</style>
